<template>
  <div>
    <div class="h-panel-bar h-panel-no-border">
      <Button icon="h-icon-search" @click="query">查询</Button>
      <Button v-for="(item, i) in buttons" :key="i" :color="colors[i % 5]" :icon="item.icon" :disabled="selectData.length == 0 && item.state == 0" @click="handle(item.click)">{{ item.title }}</Button>
      <div class="h-panel-right">
        <div class="h-input-group">
          <div class="h-input-addon">
            <Select :datas="searchData" :deletable="false" :autosize="true" v-model="searchKey" :no-border="true"></Select>
          </div>

          <Search @search="search" v-model="searchVal" placeholder="搜索"></Search>
        </div>
      </div>
    </div>
    <div class="h-panel-body h-panel-no-border">
      <Table ref="table" :datas="datas" :checkbox="checkbox" :height="height" :radio="radio" :stripe="stripe" :loading="loading" :selectRow="selectRow" :selectWhenClickTr="selectWhenClickTr" :columns="columns" @rowSelect="rowSelect">
      </Table>
    </div>
    <div class="h-panel-bar">
      <Pagination v-model="pageInfo" align="center" @change="loadData" small></Pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    checkbox: {
      default: false,
    },
    height: {
      default: 0,
    },
    radio: {
      default: false,
    },
    border: {
      default: true,
    },
    stripe: {
      default: false,
    },
    selectRow: {
      default: true,
    },
    selectWhenClickTr: {
      default: false,
    },
    params: {},
    columns: {
      default: [],
    },
    id: {
      default: "id",
    },
  },
  computed: {
    queryData() {
      return this.$store.state.queryData;
    },
    current() {
      return this.$store.state.menus.current;
    },
    menuData() {
      return this.$store.state.menus.data;
    },
  },
  mounted() {
    this.columns.forEach((item, i) => {
      if (!!item.render) {
        return;
      }
      this.searchData.push({ keyId: item.prop, title: item.title });
      if (i == 0) {
        this.searchKey = item.prop;
      }
    });
    let url = $nuxt.$route.path;
    this.buttons = this.readBtns(this.menuData, url);
  },
  activated() {
    let url = $nuxt.$route.path;
    this.buttons = this.readBtns(this.menuData, url);
    //注册当前页面弹出框时刷新数据
    this.$bus.$on("ReloadData", () => {
      this.loadData();
    });
    this.selectData = [];
    this.loadData();
  },
  deactivated() {
    this.$bus.$off("ReloadData");
  },
  data() {
    return {
      colors: [
        "primary",
        "red",
        "green",
        "yellow",
        "red",
        "green",
        "yellow",
      ],
      buttons: [],
      loadingFlag: true,
      loading: false,
      datas: [],
      searchData: [],
      searchKey: "",
      searchVal: "",
      selectData: [],
      pageInfo: {
        page: 1,
        size: 10,
        total: 20,
      },
    };
  },
  methods: {
    readBtns(menuData, url) {
      for (var i = 0; i < menuData.length; i++) {
        var item = menuData[i];
        if (item.key == url) {
          return item.buttons;
        }
        if (!!item.children) {
          var result = this.readBtns(item.children, url);
          if (!!result) {
            return result;
          }
        }
      }
    },
    loadData() {
      if (!this.loadingFlag) {
        return;
      } else {
        this.loadingFlag = false;
        setTimeout(() => {
          this.loadingFlag = true;
        }, 1000);
      }
      this.loading = true;
      this.$store
        .dispatch("loadData", {
          page: {
            current: this.pageInfo.page,
            size: this.pageInfo.size,
          },
          queryData: {
            ...this.queryData[this.current],
            ...this.params,
          },
        })
        .then((data) => {
          this.loading = false;
          console.log(data)
          if (data.data == null) {
            this.datas = [];
            this.pageInfo.total = 0;
            return;
          }
          if (data.code != 200 && data.msg != null) {
            this.$Message.error(data.msg);
          }
          this.datas = data.data.rows;
          this.pageInfo.total = data.data.total;
        });
    },
    rowSelect(data) {
      if (this.checkbox) {
        this.selectData = this.$refs.table.getSelection();
      } else {
        this.selectData = data;
      }
    },
    handle(name) {
      this.$store.commit("action", name);
      this.$store.commit("see", false);
      var supFunc = this.$parent[name];
      if (!!supFunc && supFunc instanceof Function) {
        supFunc(this.selectData);
        return;
      } else if (!!this[name]) {
        this[name]();
      } else {
        console.error("按钮事件方法未找到：", name);
      }
    },
    search(val) {
      let data = {};
      this.selectData = [];
      data[this.searchKey] = val;
      this.$store.commit("queryData", data);
      this.loadData();
    },
    query() {
      this.$store.commit("see", false);
      this.$store.commit("action", "query");
      this.$store.commit("subTitle", "查询");
      this.$router.push(this.current + "/query");
    },
    add() {
      let id = this.getColumnId();
      this.$store.commit("see", false);
      this.$store.commit("subTitle", "创建");
      if (!!id) {
        this.$router.push({
          path: this.current + "/form",
          query: {
            id: id,
          },
        });
      } else {
        this.$router.push(this.current + "/form");
      }
    },
    edit() {
      let id = this.getColumnId();
      if (id == null) {
        return;
      }
      this.$store.commit("see", false);
      this.$store.commit("subTitle", "编辑");
      this.$router.push({
        path: this.current + "/form",
        query: {
          id: id,
        },
      });
    },
    del() {
      let id = this.getColumnId();
      if (id == null) {
        return;
      }
      this.$store.dispatch("deleteEvent", { _this: this, id: id });
    },
    see() {
      let id = this.getColumnId();
      if (id == null) {
        return;
      }
      this.$store.commit("subTitle", "查看");
      this.$store.commit("see", true);
      this.$router.push({
        path: this.current + "/form",
        query: {
          id: id,
        },
      });
    },
    getColumnId() {
      let data = this.selectData;
      if (this.checkbox) {
        data = this.selectData[0];
      }
      if (data == null || data.length == 0) {
        if (this.$store.state.forms.action != "add") {
          this.$Message.warn("请选中任意列表数据");
        }
        return null;
      }

      let result = "";
      if (!this.id) {
        result = data[this.columns[0].prop];
      } else if (this.id instanceof Array) {
        this.id.forEach((item) => {
          result += data[item] + "&";
        });
        result = result.substring(0, result.length - 1);
      } else {
        result += data[this.id];
      }
      return result;
    },
  },
};
</script>